{% extends "base.html" %}
{% block head %}
<script src="//cdn.bootcss.com/angular.js/1.4.7/angular.min.js"></script>
{% endblock %}

{% block content %}



{% for i in pokemons %}

    <div class="list-group">
        <a href="#" class="list-group-item active">{{ i.chinese_name }}</a>
       <div class="list-group-item">
           <dl>
            <dt>ID</dt><dd>{{i.id}}</dd>
            <dt>日文名</dt><dd>{{i.japanese_name}}</dd>
            <dt>英文名</dt><dd>{{i.english_name}}</dd>
            <dt>身高</dt><dd>{{i.height}}</dd>
            <dt>体重</dt><dd>{{i.weight}}</dd>
            <dt>类型</dt>
            <dd>
                {% for t in i.type%}
                {{t}}
                {% endfor %}
            </dd>
            <dt>能力</dt>
            <dd>
                {% for t in i.ability%}
                {{t}}
                {% endfor %}
            </dd>
            <dt>隐藏特性</dt>
            <dd>
                {% for t in i.隐藏特性 %}
                {{t}}
                {% endfor %}
            </dd>
            <dt>进化</dt><dd>{{i.进化}}</dd>
            <dt>进化等级</dt><dd>{{i.进化等级}}</dd>

           </dl>
       </div>
      
   </div>
{% endfor %}
<div class="text-center">
    <ul class="pagination">
        {% if h_p_page %}
        <li><a href="/?page={{p_page}}">&laquo;</a></li>
        {% else %}
        <li class="disabled"><a>&laquo;</a></li>
        {% endif %}
        {% for p in pages %}
        <li id="{{p}}" ><a href="/?page={{p}}">{{p}}</a></li>
        {% endfor %}
        <!-- <li class="active"><a href="#">1</a></li>
        <li class="disabled"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li> -->
        {% if h_l_page %}
        <li><a href="/?page={{l_page}}">&raquo;</a></li>
        {% else %}
        <li class="disabled"><a>&raquo;</a></li>
        {% endif %}
        <li>总页数：{{toal_page}}</li>
    </ul>
    
</div>

{% endblock %}

{% block js %}
<script>
    angular.module('demo', [])
        .controller('MainCtrl', function ($scope) {
            $scope.name = "World";
        });
</script>
<script>
    $("#{{page}}").addClass("active")

</script>

{% endblock %}

